import Vue from 'vue'
import App from './App.vue'
import '@/assets/css/bootstrap.css'

Vue.config.productionTip = false

// 1.引入 Vue 模块
import Vuex from 'vuex'
// 2.给Vue安装插件
Vue.use(Vuex)

// 导入子模块
import count from './store/count'
import todo from './store/todo'
// 3.创建store 的实例对象
const store = new Vuex.Store({
  // 注册子模块
  // 模块名: 模块对象
  modules: {
    count,
    todo
  },

  // Vue的配置对象
  // 核心成员: state
  // 作用:存储全局共享数据
  // state:是一个对象, 数据存储在对象上
  state: {
    count: 0,
    list: [
      { id: 100, name: '吃饭', isDone: true },
      { id: 101, name: '睡觉', isDone: false },
      { id: 102, name: '打豆豆', isDone: true }
    ]
  },
  mutations: {
    // 所有 mutation 中的函数, 第一个参数都是state
    // 通过 state 可以获取全局的数据,进行操作

    // payload : 载荷,如果要接受更多的数据,只能通过这一个对象传递过来
    // 注意: mutation 函数只有 2 个参数, 第一个是 state 第二个是payload, 如果想要传递多个参数过来,可以传一个对象,在对象中定义多个属性

    add(state, payload) {
      // 修改数据必须由 mutation 中的函数来完成
      state.count += payload.num
      // console.log(payload.num)
    }
  },
  actions: {
    // 每一个 action 函数第一个参数都是 context 对象
    // context 就是 store 对象本身
    // 上下文: 指可以执行 commit 函数的对象, 全局 Vuex 对象
    // context 就是为了让 action 内可以调用 mutation 的对象
    subAsync(context, paylad) {
      // $store可以调用commit操控, 那么contex
      //  在 acthons 函数中一般不会做异步操作
      // 列如: 1 秒后修改 count - 1
      setTimeout(() => {
        // 异步的结果处不能直接修改 state
        // 而且 action 函数中也没有 state 形参
        context.commit('add')
      }, 1000)
    }
  },
  getters: {
    // getters 中定义的本质上也是一个函数
    // 所有 getters 中函数的第一个参数都是 state
    // 为什么使用 getters?
    // 因为计算属性只能在当前组件中使用, 如果多个组件都需要依赖同一计算属性,那只能赋值粘贴, 而 getters 相当于一个全局的计算属性, 可供每一个组件使用
    isAll(state) {
      return state.list.every((item) => item.isDone)
    }
  }
})
// 4.   挂载到 Vue 身上
new Vue({
  render: (h) => h(App),
  store
}).$mount('#app')
